<script setup>
import ThemeToggle from "@/components/ThemeToggleBtn.vue";
import {userStore} from "@/stores/userStore.js";
import {onMounted, ref} from "vue";

const userAction = userStore()
const isShowSettingModal = ref(false)

onMounted(() => {

})

</script>

<template>
  <div @click="isShowSettingModal=!isShowSettingModal">
    <font-awesome-icon style="cursor: pointer" class="fIcon" :icon="['fas', 'gear']" />
  </div>

  <teleport to="body">
    <transition
        enter-active-class="animate__animated animate__faster animate__zoomIn"
        leave-active-class="animate__animated animate__faster animate__zoomOut"
    >
      <div v-if="isShowSettingModal" class="settingModal bg-body overflow-hidden">
        <div class="container h-100 d-flex flex-column">
            <div class="mt-5 mb-3 d-flex justify-content-between align-items-center">
              <h2 class="page-title">设置</h2>
              <font-awesome-icon class="btnIcon" :icon="['far', 'circle-xmark']" size="2xl" @click="isShowSettingModal=!isShowSettingModal" />
            </div>

            <div class="flex-grow-1 d-flex flex-column overflow-hidden">
              <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general-tab-pane" type="button" role="tab" aria-controls="general-tab-pane" aria-selected="true">通用</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="notification-tab" data-bs-toggle="tab" data-bs-target="#notification-tab-pane" type="button" role="tab" aria-controls="notification-tab-pane" aria-selected="false">提醒</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="privacy-tab" data-bs-toggle="tab" data-bs-target="#privacy-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">隐私</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="pro-tab" data-bs-toggle="tab" data-bs-target="#pro-tab-pane" type="button" role="tab" aria-controls="pro-tab-pane" aria-selected="false">权限</button>
                </li>
              </ul>
              <div class="tab-content px-3 overflow-y-scroll flex-grow-1" id="settingTabContent">
                <div class="tab-pane fade show active" id="general-tab-pane" role="tabpanel" aria-labelledby="general-tab" tabindex="0">
                  <h5 class="mb-0">通用设置</h5>
                  <hr class="my-4" />
                  <strong class="mb-0">主题</strong>
                  <small class="d-block mb-3">设置界面的主题色</small>
                  <div class="list-group mb-5">
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">深色/浅色</strong>
                        </div>
                        <div class="col-auto">
                          <div class="custom-control custom-switch">
                            <theme-toggle></theme-toggle>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item disabled">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">自定义(开发中)</strong>
                        </div>
                        <div class="col-auto">
                          <div class="custom-control custom-switch">
                            <div class="form-check form-switch p-0">
                              <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <hr class="my-4" />
                  <strong class="mb-0">语言</strong>
                  <small class="mb-3 d-block">设置界面语言</small>
                  <div class="list-group mb-5">
                    <div class="list-group-item disabled">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">选择语言(开发中)</strong>
                        </div>
                        <div class="col-auto">
                          <select class="form-select" aria-label="Default select example">
                            <option selected>中文</option>
                            <option value="1">English</option>
                            <option value="2">Spanish</option>
                            <option value="3">Dutch</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="notification-tab-pane" role="tabpanel" aria-labelledby="notification-tab" tabindex="0">
                  <h5 class="mb-0">提醒设置</h5>
                  <hr class="my-4" />
                  <strong class="mb-0">好友状态</strong>
                  <small class="d-block mb-3">当好友上线/离线时</small>
                  <div class="list-group mb-5">
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">弹窗提示</strong>
                        </div>
                        <div class="col-auto">
                          <div class="custom-control custom-switch">
                            <div class="form-check form-switch p-0">
                              <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">提示音</strong>
                        </div>
                        <div class="col-auto">
                          <div class="form-check form-switch p-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <hr class="my-4" />

                  <strong class="mb-0">好友消息</strong>
                  <small class="d-block mb-3">当收到好友消息时</small>
                  <div class="list-group mb-5">
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">弹窗提示</strong>
                        </div>
                        <div class="col-auto">
                          <div class="custom-control custom-switch">
                            <div class="form-check form-switch p-0">
                              <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">提示音</strong>
                        </div>
                        <div class="col-auto">
                          <div class="form-check form-switch p-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <hr class="my-4" />

                  <strong class="mb-0">群聊消息</strong>
                  <small class="mb-3 d-block">当收到群聊消息时</small>
                  <div class="list-group mb-5">
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">弹窗提示</strong>
                        </div>
                        <div class="col-auto">
                          <div class="custom-control custom-switch">
                            <div class="form-check form-switch p-0">
                              <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">提示音</strong>
                        </div>
                        <div class="col-auto">
                          <div class="custom-control custom-switch">
                            <div class="form-check form-switch p-0">
                              <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item disabled">
                      <div class="row align-items-center">
                        <div class="col">
                          <strong class="mb-0">自定义(开发中)</strong>
                        </div>
                        <div class="col-auto">
                          <div class="form-check form-switch p-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="privacy-tab-pane" role="tabpanel" aria-labelledby="privacy-tab" tabindex="0">
                  <h5 class="mb-0">隐私设置</h5>
                  <hr class="my-4" />
                  <p>开发中...</p>
                </div>
                <div class="tab-pane fade" id="pro-tab-pane" role="tabpanel" aria-labelledby="pro-tab" tabindex="0">
                  <h5 class="mb-0">权限设置</h5>
                  <hr class="my-4" />
                  <p>开发中...</p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </transition>

  </teleport>

</template>

<style scoped>
.settingModal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 999;
}
.tab-content::-webkit-scrollbar {
  width: 6px;
}
.tab-content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--scrollbarThumb);
}
.tab-content::-webkit-scrollbar-track-piece {
  border-radius: 5px !important;
  background-color: var(--bs-body-bg);
}
</style>